<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染-v-if中使用 key 管理可复用的元素</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<div id="app">
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <!--app.loginType='username'-->
        <input placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email</label>
        <!--app.loginType='aa'-->
        <input placeholder="Enter your email address">
    </template>


    <template v-if="login === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
    </template>

</div>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            loginType:'username',
            login:"username"
        },
        methods:{

        },
        computed:{

        },
    });
</script>
</body>
</html>
